<template>
  <div class="y-com-date-wrap">
    <div class="y-com-date" theme y-flexX>
      日期：
      <div>{{nowDate[0]}}</div>-
      <div>{{nowDate[1] < 10 ? '0' + nowDate[1] : nowDate[1]}}</div>-
      <div>{{nowDate[2] < 10 ? '0' + nowDate[2] : nowDate[2]}}</div>
    </div>
    <ul theme y-flexX>
      <li y-side y-side2>
        <div v-for="i in (endDate[0] - startDate[0] + 1)" :key="i + 'x' + nowDate[0]" theme3 @click.stop="chageY(i + startDate[0] - 1)">
          {{i + startDate[0] - 1}}
        </div>
      </li>
      <div line></div>
      <li y-side y-side2>
        <template v-if="nowDate[0] === startDate[0] && nowDate[0] === endDate[0]">
          <div v-for="i in (endDate[1] - startDate[1] + 1)" :key="i + 'x' + nowDate[1]" theme3 @click.stop="chageM(startDate[1] + i -1)">
            {{ startDate[1] + i -1 < 10 ? '0' + (startDate[1] + i -1) : startDate[1] + i -1}}
          </div>
        </template>
        <template v-else-if="nowDate[0] === startDate[0]">
          <div v-for="i in (12 - startDate[1] + 1)" :key="i + 'x' + nowDate[1]" theme3 @click.stop="chageM(startDate[1] + i -1)">
            {{ startDate[1] + i -1 < 10 ? '0' + (startDate[1] + i -1) : startDate[1] + i -1}}
          </div>
        </template>
        <template v-else-if="nowDate[0] === endDate[0]">
          <div v-for="i in endDate[1]" :key="i + 'x' + nowDate[1]" theme3 @click.stop="chageM(i)">
            {{ i < 10 ? '0' + i : i }}
          </div>
        </template>
        <template v-else>
          <div v-for="i in 12" :key="i + 'x' + nowDate[1]" theme3 @click.stop="chageM(i)">
            {{i < 10 ? '0' + i : i}}
          </div>
        </template>
      </li>
      <div line></div>
      <li y-side y-side2>
        <template v-if="nowDate[1] === startDate[1] && nowDate[1] === endDate[1] && endDate[0] === startDate[0]" >
          <div  v-for="i in (Math.min(day, endDate[2]) - Math.min(startDate[2],day) + 1)" :key="i + 'x' + nowDate[2]" theme3 @click.stop="chageD(i)">
            {{startDate[2] + i -1 < 10 ? '0' + (startDate[2] + i -1) : startDate[2] + i -1}}
          </div>
        </template>
        <template v-else-if="nowDate[1] === startDate[1] && nowDate[0] === startDate[0]" >
          <div  v-for="i in (day - Math.min(startDate[2],day) + 1)" :key="i + 'x' + nowDate[2]" theme3 @click.stop="chageD(startDate[2] + i -1)">
            {{startDate[2] + i -1 < 10 ? '0' + (startDate[2] + i -1) : startDate[2] + i -1}}
          </div>
        </template>
        <template v-else-if="nowDate[1] === endDate[1] && nowDate[0] === endDate[0]" >
          <div  v-for="i in (Math.min(endDate[2],day))" :key="i + 'x' + nowDate[2]" theme3 @click.stop="chageD(i)">
            {{i  < 10 ? '0' + i : i }}
          </div>
        </template>
        <template v-else>
          <div  v-for="i in day" :key="i + 'x' + nowDate[2]" theme3 @click.stop="chageD(i)">
            {{i < 10 ? '0' + i : i}}
          </div>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
export default {
  name: 'YcomDate',
  props: {
    nowDate: { type: Array, default () { return [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()] } },
    startDate: { type: Array, default () { return [new Date().getFullYear() - 150, 2, 2] } },
    endDate: { type: Array, default () { return [new Date().getFullYear() + 150, 2, 2] } }
  },
  setup (props, context) {
    const data = reactive({
      y: props.nowDate[0],
      m: props.nowDate[1],
      d: props.nowDate[2]
    })
    const day = computed(() => {
      if (props.nowDate[1] === 1 || props.nowDate[1] === 3 || props.nowDate[1] === 5 || props.nowDate[1] === 7 || props.nowDate[1] === 8 || props.nowDate[1] === 10 || props.nowDate[1] === 12) {
        return 31
      }
      if (props.nowDate[1] === 2) {
        if ((props.nowDate[0] % 4 === 0 && props.nowDate[0] % 100 !== 0) || props.nowDate[0] % 400 === 0) {
          return 29
        } else {
          return 28
        }
      }
      if (props.nowDate[1] === 4 || props.nowDate[1] === 6 || props.nowDate[1] === 9 || props.nowDate[1] === 11) {
        return 30
      }
    })
    function chageY (i) {
      context.emit('update:nowDate', [i, props.nowDate[1], props.nowDate[2]])
    }
    function chageM (i) {
      context.emit('update:nowDate', [props.nowDate[0], i, props.nowDate[2]])
    }
    function chageD (i) {
      context.emit('update:nowDate', [props.nowDate[0], props.nowDate[1], i])
    }
    return {
      data,
      day,
      chageY,
      chageM,
      chageD
    }
  }
}
</script>

<style scoped>
[line]{
  width: 1px;
  height: 70%;
  background-image: linear-gradient(180deg,rgba(128, 128, 128, 0), var(--y-com-themeborderColor), rgba(128, 128, 128, 0));
  opacity: .9;
}
.y-com-date-wrap{
  position: relative;
  --w: 12vw;
}
.y-com-date{
  /* width: 10vw; */
  min-height: var(--y-com-hight-control2);
  /* width: fit-content; */
  width: var(--w);
  padding: 0 1vw;
  border-radius: var(--y-com-radius0);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
/* .y-com-date:hover{
} */

.y-com-date-wrap:hover ul{
  width: 130%;
  opacity: 1;
}
.y-com-date-wrap>ul{
  position: absolute;
  transition: var(--y-com-transition0);
  background-color: var(--y-com-themeborderColor2);
  bottom: 120%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0%;
  opacity: 0;
  overflow: hidden;
  height: 10vw;
  box-sizing: border-box;
  /* border:1px solid var(--y-com-themeborderColor); */
  border-radius: var(--y-com-radius0);
  box-shadow: 0 0 2vw .1vw rgba(94, 94, 94, 0.274);
}
.y-com-date-wrap>ul::after{
  content: '';
  width: 100%;
  height: 2vw;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(180deg, var(--y-com-themeborderColor2), rgba(128, 128, 128, 0));
  z-index: 8;
}
.y-com-date-wrap>ul::before{
  content: '';
  width: 100%;
  height: 2vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(180deg,  rgba(128, 128, 128, 0), var(--y-com-themeborderColor2));
  z-index: 6;
}
.y-com-date-wrap>ul>li{
  height: 100%;
  width: calc(var(--w)*.3 * 1.3);
  /* width: 30%; */
  /* background-color: rgba(255, 255, 255, 0.347); */
  position: relative;
  background-color: rgba(255, 255, 255, 0);
  padding:2vw 0 ;
  box-sizing: border-box;
  /* z-index: 10; */
}
.y-com-date-wrap>ul>li>div{
  padding: .5vw;
  border-radius: var(--y-com-radius0);
  width: 80%;
  margin: 1% auto;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  /* z-index: 11; */
}
</style>
